﻿@model OfficialFeedListModel
@{    
    //page title
    ViewBag.Title = T("Admin.Configuration.Plugins.OfficialFeed").Text;

    //currently we support only 15 page size for this page
    var defaultGridPageSize = 15;
}
@Html.AntiForgeryToken()
<div class="section-header">
    <div class="title">
        <img src="@Url.Content("~/Administration/Content/images/ico-configuration.png")" alt="" />
        @T("Admin.Configuration.Plugins.OfficialFeed")
    </div>
    <div class="options">
            
    </div>
</div>
<p>
    Here you can find third-party extensions and themes which are developed by our community and partners. They are also available in our <a href="http://www.nopcommerce.com/extensions-and-themes.aspx?utm_source=admin-panel&utm_medium=official-plugins&utm_campaign=admin-panel" target="_blank">extensions directory</a>
</p>
<table class="adminContent">
    <tr>
        <td class="adminTitle">
            @Html.NopLabelFor(model => model.SearchName):
        </td>
        <td class="adminData">
            @Html.EditorFor(model => model.SearchName)
        </td>
    </tr>
    <tr>
        <td class="adminTitle">
            @Html.NopLabelFor(model => model.SearchVersionId):
        </td>
        <td class="adminData">
            @Html.DropDownList("SearchVersionId", Model.AvailableVersions)
        </td>
    </tr>
    <tr>
        <td class="adminTitle">
            @Html.NopLabelFor(model => model.SearchCategoryId):
        </td>
        <td class="adminData">
            @Html.DropDownList("SearchCategoryId", Model.AvailableCategories)
        </td>
    </tr>
    <tr>
        <td class="adminTitle">
            @Html.NopLabelFor(model => model.SearchPriceId):
        </td>
        <td class="adminData">
            @Html.DropDownList("SearchPriceId", Model.AvailablePrices)
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="button" id="search-plugins" class="k-button" value="@T("Admin.Common.Search")" />
        </td>
    </tr>
</table>
<table class="adminContent">
    <tr>
        <td>
            <div id="plugins-grid"></div>
            <script>
                $(document).ready(function() {
                    $("#plugins-grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                read: {
                                    url: "@Html.Raw(Url.Action("OfficialFeedSelect", "Plugin"))",
                                    type: "POST",
                                    dataType: "json",
                                    data: additionalData
                                }
                            },
                            schema: {
                                data: "Data",
                                total: "Total",
                                errors: "Errors"
                            },
                            error: function(e) {
                                display_kendoui_grid_error(e);
                                // Cancel the changes
                                this.cancelChanges();
                            },
                            pageSize: @(defaultGridPageSize),
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        pageable: {
                            refresh: true
                        },
                        editable: {
                            confirmation: false,
                            mode: "inline"
                        },
                        scrollable: false,
                        columns: [
                            {
                                field: "PictureUrl",
                                title: "@T("Admin.Configuration.Plugins.OfficialFeed.Picture")",
                                width: 150,
                                template: '<img src="#=PictureUrl#" width="125" />',
                                headerAttributes: { style: "text-align:center" },
                                attributes: { style: "text-align:center" }
                            }, {
                                field: "Name",
                                title: "@T("Admin.Configuration.Plugins.OfficialFeed.Name")",
                                width: 500
                            }, {
                                field: "Price",
                                title: "@T("Admin.Configuration.Plugins.OfficialFeed.Price")",
                                width: 70
                            }, {
                                field: "Url",
                                width: 150,
                                title: "@T("Admin.Configuration.Plugins.OfficialFeed.Download")",
                                template: '<a href="#=Url#?utm_source=admin-panel&utm_medium=official-plugins&utm_campaign=admin-panel" class="plugin-download-link" target="_blank">@T("Admin.Configuration.Plugins.OfficialFeed.Download")</a>',
                                headerAttributes: {style: "text-align:center" },
                                attributes: { style: "text-align:center" }
                            },
                            {
                                field: "CategoryName",
                                title: "@T("Admin.Configuration.Plugins.OfficialFeed.Category")",
                                width: 200
                            },{
                                field: "SupportedVersions",
                                title: "@T("Admin.Configuration.Plugins.OfficialFeed.SupportedVersions")",
                                width: 200
                            }
                        ]
                    });
                });
            </script>
        </td>
    </tr>
    <tr>
        <td width="100%">
            <input type="submit" id="btnRefresh" style="display: none" />
            <script type="text/javascript">
                $(document).ready(function () {
                    $('#btnRefresh').click(function () {
                        //refresh grid
                        var grid = $("#plugins-grid").data('kendoGrid');
                        grid.dataSource.page(1); //new search. Set page size to 1
                        //grid.dataSource.read(); we already loaded the grid above using "page" function

                        //return false to don't reload a page
                        return false;
                    });
                });
            </script>
            <script type="text/javascript">
                $(document).ready(function () {
                    //search button
                    $('#search-plugins').click(function () {
                        //search
                        var grid = $('#plugins-grid').data('kendoGrid');
                        grid.dataSource.page(1); //new search. Set page size to 1
                        //grid.dataSource.read(); we already loaded the grid above using "page" function

                        return false;
                    });
                });
                
                $("#@Html.FieldIdFor(model => model.SearchName)").keydown(function (event) {
                    if (event.keyCode == 13) {
                        $("#search-plugins").click();
                        return false;
                    }
                });

                function additionalData() {
                    var data = {
                        SearchName: $('#@Html.FieldIdFor(model => model.SearchName)').val(),
                        SearchVersionId: $('#SearchVersionId').val(),
                        SearchCategoryId: $('#SearchCategoryId').val(),
                        SearchPriceId: $('#SearchPriceId').val()
                    };
                    addAntiForgeryToken(data);
                    return data;
                }

            </script>
        </td>
    </tr>
</table>